<!doctype html>
<html ng-app="MercyApp" style="width:100%; height:100%; ">
	<head>
		<title>Bungalow</title>
		<base href="app://bungalow/public/">
		<script src="scripts/server.js"></script>
		<link rel="stylesheet" href="themes/main.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
		<script src="bower_components/jquery/dist/jquery.js"></script>
		<!-- Mashcast -->
		<script src="scripts/style.js"></script>
		<script src="apps/mashcast/scripts/mashcast.js"></script>
		<script src="scripts/spotify.js"></script>
		<script src="scripts/main.js"></script>

	</head>
	<body style="width:100%; height:100%;">
		
			<header style="">
				<div class="btn-group">
					<button class="btn" onclick="shell.goBack()">&lt;</button>
					<button class="btn" onclick="shell.goForward()">&gt;</button>
				</div>
				<form nonvalidate onsubmit="shell.searchEnter(event);">
					<input type="search" id="search" placeholder="Search">
				</form>
			</header>
			<div class="alert alert-warning" style="display: none" id="alert">
				<p>Test alert<a style="color: black;margin-right: 10pt;float: right">x</a></p>
			</div>
			<main style="">
				<aside>
					<div id="menu" style="overflow:scroll">
						<ul cellspacing="0" width="100%" class="menu">
							<li data-uri="spotify:start"><span class="fa fa-home"></span> Home
							</li>
							
							<li data-uri="spotify:playqueue"><span class="fa fa-bars"></span> Play queue
							</li>
							<li data-uri="spotify:toplist"><span class="fa fa-flag-o"></span> Top Lists
						
							
							<li data-uri="spotify:featured"><span class="fa fa-glass"></span> Featured
							</li>
							<li data-uri="spotify:user:spotify:playlist:7kJcmbrVwkKiqM0tPYoMuF"><span class="fa fa-music"></span> Collaborative mix
							</li>
						</ul>
						<ul id="searchHistory" cellspacing="0" width="100%" class="menu">
							<tbody></tbody>
						</ul>
						<hr>
						<ul cellspacing="0" width="100%" class="menu">
							
							<li data-uri="spotify:finder"><span class="fa fa-cube"></span> Apps</td>
							</li>
							
						</ul>
						<ul id="apps" cellspacing="0" width="100%" class="menu">
						
						</ul>
						<hr><br>
						<a class="btn-black" onclick="shell.startCreatePlaylist()" style="margin-left: 15pt">+ New Playlist</a>
						<br><br>
						<ul id="playlists" cellspacing="0" width="100%" class="menu">
							
						</ul>
					</div>

					<div id="nowplaying" >
						<div id="nowplaying_header">
							<h3 id="song_title"></h3>
							<p id="song_artist"></p>
							<small id="song_album"></small>
						</div>
						<div id="nowplaying_image" style="background-size: cover;flex: 1"></div>
					</div>
				</aside>
				<script>

				$('.menu').menulize();
				</script>
				<div id="viewstack">

				</div>
			</main>
			
			<footer style="">
				<div class="conliols" style="text-align: center; width:100px">
					<i id="btnSkipBack" onclick="shell.playPrevious()" class="fa fa-fast-backward btn"></i>
					<i id="btnPlay" onclick="shell.playPause()" class="fa fa-play btn" style="-webkit-liansform: scale(1.5)"></i>
					<i id="btnSkipNext" onclick="shell.playNext()" class="fa fa-fast-forward btn"></i>
				</div>
				<input type="range" style="width: 100%" min="0" max="1" value="0" id="liack_position">
				<div class="conliols" style="width: 50pt">
					<i class="fa fa-repeat"></i>
				</div>
			</footer>
			<div class="darken"></div>
			<div id="loginView" class="lightbox">
				<form onsubmit="try {shell.login(event); } catch(e) {console.log(e.stack);} return false">
					<h1>Bungalow Spotify client</h1>
					<input name="username" id="username" placeholder="username" value="drsounds"><br>
					<input name="password" id="password" type="password" placeholder="password"><br>
					<button type="submit" class="btn">Log in</button>
					<div id="throbber"><img src="/img/throbber.gif"></div>
				</form>
			</div>
	</body>
</html>